﻿@model Marbale.BusinessObject.Cards.Inventory
@{
    ViewBag.Title = "Inventory";
    Layout = null;
}
<div>
<div class="tabGroup tabGroup1">
  <ul class="swichtab-controller">
    <li data-swichtab="controller"><a href="#tab1" id="addcardtab">Add Cards</a></li>
    <li data-swichtab="controller"><a href="#tab2">Delete Cards</a></li>
    <li data-swichtab="controller"><a href="#tab3">View Inventory</a></li>
  </ul>
     
  <div class="swichtab-contents">
                                
    
    <div id="tab1" class="swichtab-panel" data-swichtab="target">
 <div>
        
                                 
        <label for="ex4"><b>User:</b></label>
     @Html.LabelFor(m => m.User,"Semnox", new { @class = "form-control"})
    
           
        <label for="ex3"><b>Recieved Date:</b></label>
     @Html.LabelFor(m => m.RecievedDate,"04/06/2019", new { @class = "form-control"})
    
                 
        <label for="ex3"><b>Number Of Cards:</b></label>
     @Html.TextBoxFor(m => m.NumberOfCards, new { @id="NumberOfCardsAdd", @class = "form-control"})
             

    <div class="row">
      <div class="col">
             <input type="submit" id="inventoryAdd" name="submit" value="Submit" class="btn btn-primary form-control btn-block inventory" />
            @*   <button id="btnSubmit" class="btn btn-primary form-control btn-block" type="submit" >Submit</button>*@

      </div>

      <div class="col">
           <button class="btn btn-danger form-control  btn-block"data-dismiss="modal">Cancel</button></div>
    </div>
          
  </div>
          
       </div>
      
                                   


    <div id="tab2" class="swichtab-panel" data-swichtab="target">

        <div>
                     
                 
        <label for="ex4"><b>User:</b></label>
     @Html.LabelFor(m => m.User,"Semnox", new { @class = "form-control"})
    
           
        <label for="ex3"><b>Recieved Date:</b></label>
     @Html.LabelFor(m => m.RecievedDate,"04/06/2019", new { @class = "form-control"})
    
                 
        <label for="ex3"><b>Number Of Cards:</b></label>
     @Html.TextBoxFor(m => m.NumberOfCards, new { @id="NumberOfCardsDel", @class = "form-control"})

         
      <div class="row">
      <div class="col">
               <button id="inventoryDel" class="btn btn-primary form-control btn-block inventory" type="submit" >Submit</button></div>

      <div class="col">
           <button class="btn btn-danger form-control  btn-block"data-dismiss="modal" >Cancel</button></div>
    </div>
  
</div>
    </div>
  
 
    <div id="tab3" class="swichtab-panel" data-swichtab="target">
  
        <div>
          
           <div class="form-group row" >
            <div class="col-md-3"> 
                
                Till Date  
                @Html.RadioButtonFor(model => model.TillDate, "Till Date", new { @checked="true"})  
                </div>
               <div class="col-md-3"> 
                For Period  
                @Html.RadioButtonFor(model => model.TillDate, "For Period")  
 </div>
       <div class="col-md-3">
         @Html.TextBoxFor(m => m.From, new {@class="form-control datapicker", data_select="datepicker",placeholder ="From Date"})
           </div>
    <div class="col-md-3">
   @Html.TextBoxFor(m => m.To, new {@class="form-control datapicker", data_select="datepicker",placeholder ="To Date"})
        </div>
                
            </div>  
          <input type="submit" name="submit" value="Generate" class="btn btn-primary btn-md" id="submitinventory" />
              
            </div>
        </br>
        <div>

    <table id="cardtableinventory" class="table marbleTable" style="overflow-x:auto;height:216px;width: 547px">
        <thead class="thead-dark">
            <th>Number Of Cards</th>
            <th>Action</th>
            <th>Action Date</th>
            <th>Action By</th>
            </thead>
      <tbody></tbody>
            </table>
            </div>
        </div>


    </div>
  </div>
       <div class="row">
      <div class="col">
             @Html.LabelFor(m => m.NumberOfCards,"Card inventory till date :", new { @class = "form-control ",@style="color: deepskyblue;bottom: -9px;right: 0px;border: none;"})
          </div>
            <div class="col">
          <label for="lblName" style="position: absolute;
        right: 260px;
        bottom: 6px;
        color: coral;"></label> 
          </div>
      <div class="col">
      @Html.LabelFor(m => m.NumberOfCards,"Card balance in stock :", new { @class = "form-control",@style="color: deepskyblue;bottom: -9px;right: 0px;border: none;"})
    </div>
          </div>
    @{
      <input type="hidden" id="Totalcards" value="@ViewBag.TotalNumberOfCards"/>
        }
   
  <!-- /.swichtab-contents -->
</div>

<!-- /.swichtab -->

<link href="~/Content/PluginTab/src/css/swichTab.css" rel="stylesheet" />
<link href="~/Content/DatetimePicker/jquery.datepicker2.css" rel="stylesheet" />
<script src="~/Content/DatetimePicker/jquery.datepicker2.js"></script>
<script src="~/Content/PluginTab/src/js/jquery.swichTab.js"></script>

<script >
    $("document").ready(function () {
        var totalcards = $('#Totalcards').val();

        $("label[for='lblName']").text(totalcards);
        setTimeout(function () {
            $("#addcardtab").trigger('click');
        }, 10);
    });
    $('#submitinventory').click(function () {
        debugger
        var myObject = {
            From: $('#From').val(),
            To:$('#To').val()
        };
        var url = '@Url.Content("~/Cards/GetInventory")';
        $.getJSON(url,myObject, function (data) {
            $("#cardtableinventory tbody").html('');
            debugger
            var html;
            $.each(data, function (i, item) {
                html += "<tr><td>" + item.NumberOfCards + "</td>";
                html += "<td>" + item.ActionName + "</td>";
                html += "<td>" + item.ActionDateString + "</td>";
                html += "<td>" + item.ActionBy + "</td>";                
            });
            $("#cardtableinventory tbody").html(html);
        });

    });
    $('#inventoryAdd').click(function () {
      
        var inventory = {
            NumberOfCards: $('#NumberOfCardsAdd').val(),
            ActionName: "Add"
        };
        var url = '@Url.Content("~/Cards/AddDeleteInventory")';
        $.getJSON(url, inventory, function (data) {
        
            $("label[for='lblName']").text(data);
        });
    });
    $('#inventoryDel').click(function () {
       
        var inventory = {
            NumberOfCards: $('#NumberOfCardsDel').val(),
            ActionName: "Reduce"

        };
        var url = '@Url.Content("~/Cards/AddDeleteInventory")';
        $.getJSON(url, inventory, function (data) {
            $("label[for='lblName']").text(data);

        });
        });

    $('.dropdown-toggle').collapse({
        toggle: false
    });
    $('.tabGroup1').swichTab();
</script>

